//引入重置样式
require("../css/commCss/normalize.css");
//引入重置扩展样式
require("../css/commCss/reset.css");
//引入公共样式
require("../css/commCss/property.css");
//引入公共扩展样式
require("../css/commCss/basic.css");

//引入字体图标样式
require("../lib/font_3139541_zokbtoztf/iconfont.css");

//引入当前页面样式
require("../css/Movementdata.less");

//引入axios
const axios = require("axios");

//导入util
const util = require("../lib/util");

//导入echarts
const echarts = require('echarts')

//导入weui
require("weui");
const weui = require("weui.js");

//文档加载事件
document.addEventListener("DOMContentLoaded", function () {

    /* 
    1:点击goback,返回上一页
    */

    document.querySelector('#goback').addEventListener('click', function () {

        history.go(-1)
    })

    /* 
    2:数据可视化,周运动数据
    */

    //2.4定义x轴的数据
    let xData = ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']

    //2.5定义y轴的数据
    let yData = [30, 60, 30, 120, 80, 80, 60]

    weekSportData(xData, yData)
    function weekSportData(x, y) {

        // 2.1初始化echarts实例

        let myecharts = echarts.init(document.querySelector('#dataTable1'))

        //2.2是指图标配置项和数据
        option = {
            //标题
            title: {
                text: '近7天运动时长'
            },
            //提示框
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    type: "cross"
                }
            },
            xAxis: {
                type: 'category',
                data: x,
            },
            yAxis: {
                type: 'value'
            },
            //核心数据
            series: [
                {
                    data: y,
                    type: 'bar',
                    itemStyle: {
                        color: "#83A7D1"
                    }
                }
            ]
        };

        //2.3画图
        myecharts.setOption(option)
    }

    /* 
    3:饼状图
    */

    drawpie()
    function drawpie() {

        // 2.1初始化echarts实例

        let myecharts = echarts.init(document.querySelector('#dataTable2'))

        //2.2是指图标配置项和数据
        option = {
            title: {
                text: '运动分类',
                // left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                itemWidth: 10,
                itemHeight: 10,
                borderRadius: 0,
                icon: "rect"
            },
            series: [
                {
                    label: {
                        position: 'inside',
                        formatter: '{d}%',
                        color: '#fff',
                    },
                    // name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: 1048, name: '跑步',
                            itemStyle: { color: '#736171' }
                        },
                        { value: 735, name: '骑行', itemStyle: { color: '#ff5500' } },
                        { value: 580, name: '训练', itemStyle: { color: '#91cb74' } },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        //2.3画图
        myecharts.setOption(option)
    }

    /* 
    3:堆叠图
    */

    drawStack()
    function drawStack() {

        // 2.1初始化echarts实例

        let myecharts = echarts.init(document.querySelector('#dataTable3'))

        //2.2是指图标配置项和数据
        option = {
            title:{
                text:'近七日训练次数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                left: "right",
                top: "middle",//图标位置宽度
                itemHeight1:14,
                itemWidth:14,//图标宽度
                icon:'rect',  //图标正方形        
                orient:'vertical',            
                align: 'left' ,//图标和文字左右
            },
            //直角坐标系 网格
            grid: {
                left: '3%',
                right: '15%',//直角坐标系 网格距离右边的距离
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16', '2-17']
            },
            series: [
                {
                    name: '跑步',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310],itemStyle: {
                        color: "#558ED5"
                      }
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 212, 201, 154, 190, 330, 410],itemStyle: {
                        color: "#93CDDD"
                      }
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false//不显示里面的数据
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320],
                    itemStyle: {
                        color: "#92D050"
                      }
                }
            ]
        };

        //2.3画图
        myecharts.setOption(option)
    }

    /* 
    渲染头像
    */
   axios.get('http://139.9.177.51:8099/users/accountinfo',{
       params:{
        userId:localStorage.userId
       }
   }).then(function(res){
       
    //渲染头像
    let data=res.data.data
    document.querySelector('#imgUrl').src=data.imgurl
    // console.log(data);
   })
   


})